<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>自选</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/set.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css"/>

    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css"/>
    <style>
        body {
            width: 100%;
            height: auto;
            overflow: hidden;
        }

        body,
        html {
            overflow-x: hidden;
        }

        .content {
            background-color: #FFFFFF;
        }

        .zhangfu {
            position: relative;
        }

        .zhang {
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 5px solid #8BC1FC;
            position: absolute;
            right: 5px;
            bottom: 15px;
        }

        .zhang:active {
            border-top: 5px solid #ffffff;
        }

        .die:active {
            border-bottom: 5px solid #ffffff;
        }

        .die {
            width: 0;
            height: 0;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-bottom: 5px solid #8BC1FC;
            position: absolute;
            right: 5px;
            top: 15px;
        }

        .down_relese img {
            max-width: 20px;
            padding-bottom: 12px;
            display: block;
            position: relative;
            bottom: 0px;
            transform: translate(50% 50%);
            margin: 0 auto;
        }

        .aui-tab-item {
            color: #999999;
        }

        .content_swiper {
            width: 95%;
            height: auto;
            min-height: 24rem;
        }

        .content_swiper .swiper-slide .slide-title {
            width: 100%;
            border-bottom: 1px solid #E6E6E6;
        }

        .content_swiper .swiper-slide li {
            width: 100%;
            height: 66px;
            /*line-height: 66px;*/
            border-bottom: 1px solid #E6E6E6;
            position: relative;
        }

        .bz-nameul .bz-nameli span,
        .jg-nameul .jg-nameli span,
        .zf-nameul .zf-nameli span {
            display: block;
            height: 1rem;
            color: #000000;
            height: 0.8rem;
            top: 12px;
            border-radius: 50%;
            /* line-height: 23px; */
        }

        .xdzf-nameul .xdzf-li span {
            display: block;
            height: 1rem;
            top: 12px;
            line-height: 2.2rem;
        }

        .bz-nameul .bz-nameli {
            width: 1.25rem;
            height: 1.25rem;
            position: relative;
            margin: 0 auto;
            padding-top: 0.35rem;
        }

        .bz-name-img {
            width: 1.25rem;
            height: 1.25rem;
            margin: 0 auto;
            margin-top: 0.25rem;
        }

        .zf-nameul .zf-nameli span,
        .xdzf-nameul .xdzf-li span {
            display: block;
            height: 25px;
            color: #000000;
        }

        .jys-nameul li,
        .jg-nameul li,
        .dbdh-nameul li,
        .xdzf-nameul li {
            line-height: 66px;
        }

        .bz-name-title {
            font-size: 0.6rem;
            line-height: 1.2rem;
        }
    </style>
</head>

<body>

<!--列表信息 Start-->
<div class="content">

    <section class="aui-refresh-content">
        <div class="aui-content">
            <ul id="dem">

                <!--自选 Tab Block-->
                <div class="swiper-container content_swiper">
                    <div class="swiper-wrapper" id="">
                        <div class="swiper-slide aui-tab-item">
                            <div class="slide-title">币种</div>
                            <ul class="bz-nameul" id="bizhongul">
                                <!---->
                            </ul>
                        </div>
                        <div class="swiper-slide aui-tab-item">
                            <div class="slide-title">交易所</div>
                            <ul class="jys-nameul" id="jysul">
                                <!---->
                            </ul>
                        </div>
                        <div class="swiper-slide aui-tab-item">
                            <div class="slide-title">价格</div>
                            <ul class="jg-nameul" id="jiageul">
                                <!---->
                            </ul>
                        </div>
                        <div class="swiper-slide aui-tab-item">
                            <div class="slide-title">价格涨幅</div>
                            <ul class="zf-nameul" id="zhangfuul">
                                <!---->
                            </ul>
                        </div>
                        <div class="swiper-slide aui-tab-item">
                            <div class="slide-title">代币兑换</div>
                            <ul class="dbdh-nameul" id="daibiul">
                                <!---->
                            </ul>
                        </div>
                        <div class="swiper-slide aui-tab-item">
                            <div class="slide-title">相对涨幅</div>
                            <ul class="xdzf-nameul" id="xdzhangfuul">
                                <!---->
                            </ul>
                        </div>
                    </div>
                    <div style="height: 2.5rem; text-align: center;line-height: 2.5rem;color: #ccc;" id="tishi">正在加载中
                    </div>
                    <div style="height: 2.5rem;"></div>
                </div>
            </ul>
        </div>
    </section>
</div>
<!--列表信息 end-->

</body>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/aui-pull-refresh.js" type="text/javascript" charset="utf-8"></script>
<script src="../../script/tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  //信息列表-自选
  var swiper = new Swiper('.content_swiper', {
    slidesPerView: 4,
    spaceBetween: 0,
    freeMode: true,
    pagination: {
      //      el: '.swiper-pagination',
      clickable: true,
    },
  });

  //下拉刷新
  var mindex = 0;
  var pullRefresh = new auiPullToRefresh({
    container: document.querySelector('.aui-refresh-content'),
    triggerDistance: 100
  }, function (ret) {
    if (ret.status == "success") {
      setTimeout(function () {
        $('#bizhongul').html('');
        $('#jysul').html('');
        $('#jiageul').html('');
        $('#zhangfuul').html('')

        $('#daibiul').html('')
        $('#xdzhangfuul').html('')

        mindex = 0;

        ajax_fordata();
        pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
      }, 1500)
    } else {
      var html = '<span>没有更多</span>'
    }
  })

  $(function () {
    ajax_fordata();
  });

  function ajax_fordata() {

    var si = setInterval(function () {
      if (window.parent.headers != {}) {
        clearInterval(si)
        $('#tishi').text("正在加载中")
        $.ajax({
          url: orginlink + '/coin/getTickerAll?exchangeId=' + 6,
          type: 'GET',
          headers: window.parent.headers,
          contentType: "application/json",
          dataType: 'json',
          success: function (result) {
            if(result.code == 0){

              console.log(window.parent.headers);
              addBox(result);
              localStorage.setItem("dataList", JSON.stringify(result.result))
            }
          }
        });
      }
    }, 100)


  }

  function addBox(result) {
    $('#tishi').text("已没有更多")
    $.each(result.result, function (index, obj) {
      var oBizhong = obj['nickName'];
      var oJiaoyisuo = obj['exchangeId'];
      var oJiage = obj['priceCNY'];
      var oJgzfPer = obj['roseCny'];
      var oJgzfPic = obj['changeCnyPrice'];
      var oDuihuan = obj['price'] + obj['symbol'];
      var oXdzhangfuPer = obj['rose'];
      var oXdzhangfuPic = obj['changePrice'];
      var imgurl = obj['urlImg']

      var x = getjysName(oJiaoyisuo);

      oJiage = oJiage.substring(0, 6);
      oJgzfPic = oJgzfPic.substring(0, 6);
      oDuihuan = oDuihuan.substring(0, 6)
      oXdzhangfuPic = oXdzhangfuPic.substring(0, 6);

      //涨幅 百分小数取一位预处理
      oJgzfPer = changeTwoDecimal_f(oJgzfPer);
      oXdzhangfuPer = changeTwoDecimal_f(oXdzhangfuPer);
      //数值前添加符号表示涨+跌-
      if (oJgzfPer > 0) {
        oJgzfPer = '+' + oJgzfPer;
      }

      $('#bizhongul').append('<li class="bz-nameli" onclick="todetail(' + index + ')">' + '<img src="' + imgurl + '" class="bz-name-img"/><span class="bz-name-title">' + oBizhong + '</span>' + '</li>');
      $('#jysul').append('<li class="jys-nameli" onclick="todetail(' + index + ')"><span>' + x + '</span></li>');
      $('#jiageul').append('<li class="jg-nameli" onclick="todetail(' + index + ')"><span>￥' + oJiage + '</span>' + '</li>');
      $('#zhangfuul').append('<li class="zf-nameli" onclick="todetail(' + index + ')"><span class="zf-huilv">' + oJgzfPer + '%</span><span class="zf-zhishu"><b>￥</b>' + oJgzfPic + '</span>' + '</li>')

      $('#daibiul').append('<li onclick="todetail(' + index + ')"><span>' + oDuihuan + '</span></li>');
      $('#xdzhangfuul').append('<li class="xdzf-li" onclick="todetail(' + index + ')"><span class="xdzf-span">' + oXdzhangfuPer + '%</span><span class="xdzf-jg-span"><b>￥</b>' + oXdzhangfuPic + '</span>' + '</li>')

      //数值判断涨跌后添加颜色
      if (oJgzfPer > 0) {
        $('.zf-huilv:eq(' + (index + mindex) + ')').css('color', getRiseColor());
      } else if (oJgzfPer < 0) {
        $('.zf-huilv:eq(' + (index + mindex) + ')').css('color', getFallColor());
      } else {
        $('.zf-huilv:eq(' + (index + mindex) + ')').css('color', '#000000');
      }
      if (oXdzhangfuPer > 0) {
        $('.xdzf-span:eq(' + (index + mindex) + ')').css('color', getRiseColor());
      } else if (oXdzhangfuPer < 0) {
        $('.xdzf-span:eq(' + (index + mindex) + ')').css('color', getFallColor());
      } else {
        $('.xdzf-span:eq(' + (index + mindex) + ')').css('color', '#000000');
      }
    })

    mindex += result.result.length
  }

</script>

</html>
